﻿@model HelloMinasan.Web.Song.ViewModels.ModelForList<HelloMinasan.Domain.FavouriteSong>
@{
    ViewBag.Title = "My Favourite Songs";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.msgbox.min.js")"></script>
<link href="@Url.Content("~/Content/jquery.msgbox.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/Js/FavouriteSongs.js")"></script>

<script>
    var keyword = "@ViewBag.Keyword";
</script>

<div class="contentSection">
    <div class="titleSection">
        <img src="@Url.Content("~/Content/Images/song.png")" width="20" height="20"/>
        <span class="titleTab">My favourite songs</span>
    </div>
    <div class="contentSectionInside">
        <div class="searchContainer" align="left">
            <input id="inputTitleSearch" class="inputUserSearch" value="@ViewBag.Keyword" placeholder="Title of song" type="text" />
            <button onclick="searchFavouriteSong()" class="backgroundLinear inputButtonSearch">Search </button>
        </div>
        <div class="contentSection" style="padding-left: 5px;">
            @if (Model.ListItem.Any())
            {
                foreach (var item in Model.ListItem)
                {
                <div class="divListSongManagement">
                    <div class="imgdivListSong">
                        <div class="starScore">@item.Song.LikeTime</div>
                    </div>
                    <div class="titleSongName" title="@item.Song.SongName">
                        @if (item.Song.SongName.Length > 10)
                        {
                            @item.Song.SongName.Substring(0, 10) <text>...</text>
                        }
                        else
                        {
                            @item.Song.SongName
                        }
                    </div>
                    <div>
                        @item.Song.PostedDate
                    </div>
                    <div>
                        <a href="@Url.Content("~/Song/Songs/" + item.SongId)">
                            <img src="@Url.Content("~/Content/Images/play.png")" title="Listen to this song" />
                        </a>
                        <a href="#" onclick="unAddFavouriteSongs(@item.Song.Id)">
                            <img src="@Url.Content("~/Content/Images/delete.png")" width="32" title="Delete this song" />
                        </a>
                    </div>
                </div>
                }
            }
            else
            {
                <div>There is no song in your list</div>
            }
        </div>

        <div align="left" style="margin-top: 10px;">
            @if (@Model.PagingControl.PreviousPageNumber > 0)
            {
                <a onclick="gotoFavouritePage(1)" class="buttonClass">First</a>
                <a onclick="gotoFavouritePage(@Model.PagingControl.PreviousPageNumber)" class="buttonClass">Back</a>
            }
            <select onchange="jumpToPage(this)">
                @for (int i = 1; i <= Model.TotalPageCount; i++)
                {
                    if (i != Model.PagingControl.CurrentPageNumber)
                    { <option value="@i">@i</option> }
                    else
                    { <option value="@i" selected>@i</option> }
                }
            </select>
            @if (@Model.PagingControl.NextPageNumber <= Model.TotalPageCount)
            {
                <a onclick="gotoFavouritePage(@Model.PagingControl.NextPageNumber)" class="buttonClass">Next</a>
                <a onclick="gotoFavouritePage(@Model.TotalPageCount)" class="buttonClass">Last</a>
            }
        </div>
        <div class="center">
            <img id="loaderIndicator" src="@Url.Content("~/Content/Images/loader.gif")" />
            <br />
            <span id="errorMessage"></span>
        </div>
    </div>
</div>
